<template>
	<view class="diy-banner" :style="{ height: `${imgHeights[imgCurrent]}px` }">
		<!-- 图片轮播 -->
		<swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :circular="true"
			:interval="itemStyle.interval * 1000" @change="_bindChange">
			<swiper-item v-for="(dataItem, index) in dataList" :key="index">
				<image mode="widthFix" class="slide-image" :src="dataItem.imgUrl" @click="onLink(dataItem.link)"
					@load="_imagesHeight" />
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view class="indicator-dots" :class="itemStyle.btnShape">
			<view class="dots-item" :class="{ active: imgCurrent == index }"
				:style="{ backgroundColor: itemStyle.btnColor }" v-for="(dataItem, index) in dataList" :key="index">
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from '../mixin';

	export default {
		name: 'Banner',

		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			dataList: Array
		},

		mixins: [mixin],

		/**
		 * 私有数据,组件的初始数据
		 * 可用于模版渲染
		 */
		data() {
			return {
				windowWidth: 750,
				indicatorDots: false, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				duration: 800, // 滑动动画时长
				imgHeights: [], // 图片的高度
				imgCurrent: 0 // 当前banne所在滑块指针
			};
		},

		created() {
			const _this = this;
			uni.getSystemInfo({
				success({
					windowWidth
				}) {
					_this.windowWidth = windowWidth > 750 ? 750 : windowWidth;
				}
			});
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			/**
			 * 计算图片高度
			 */
			_imagesHeight({
				detail
			}) {
				const _this = this;
				// 获取图片真实宽度
				const {
					width,
					height
				} = detail;
				// 宽高比
				const ratio = width / height;
				// 计算的高度值
				const viewHeight = _this.windowWidth / ratio;
				// 把每一张图片的高度记录到数组里
				_this.imgHeights.push(viewHeight);
			},

			/**
			 * 记录当前指针
			 */
			_bindChange(e) {
				this.imgCurrent = e.detail.current;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.diy-banner {
		position: relative;

		// swiper组件
		.swiper-box {
			height: 100%;

			.slide-image {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				display: block;
			}
		}

		/* 指示点 */
		.indicator-dots {
			width: 100%;
			height: 28rpx;
			padding: 0 20rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx;
			opacity: 0.8;
			display: flex;
			justify-content: center;

			.dots-item {
				width: 16rpx;
				height: 16rpx;
				margin-right: 8rpx;
				background-color: #fff;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					background-color: #313131 !important;
				}
			}

			// 圆形
			&.round .dots-item {
				width: 16rpx;
				height: 16rpx;
				border-radius: 20rpx;
			}

			// 正方形
			&.square .dots-item {
				width: 16rpx;
				height: 16rpx;
			}

			// 长方形
			&.rectangle .dots-item {
				width: 22rpx;
				height: 14rpx;
			}
		}
	}
</style>